<template>
  <Bg :title="'任务'">
    <div class="main">
      <h1>{{ message }}</h1>
      <button @click="increment">返回</button>
      <p>Double count is: {{ doubleCount }}</p>
    </div>
  </Bg>
</template>

<script>
import { ref, computed, onMounted, onUpdated, onUnmounted } from "vue";
import { useRouter } from "vue-router";

export default {
  name: "CompositionExampleWithLifecycle",

  setup() {
    const router = useRouter();

    const count = ref(0);
    const message = ref("任务详情");
    const doubleCount = computed(() => count.value * 2);

    const increment = () => {
      router.back();
    };

    // 生命周期钩子
    onMounted(() => {
      console.log("Component is mounted.");
      // 可以在此处执行初始化操作，例如 API 调用
    });

    onUpdated(() => {
      console.log("Component is updated.");
      // 可以在这里执行依赖于 DOM 的操作，例如重新计算尺寸
    });

    onUnmounted(() => {
      console.log("Component is unmounted.");
      // 清理工作，例如移除事件监听器或定时器
    });

    // 将响应式变量、计算属性和方法暴露给模板
    return {
      count,
      message,
      doubleCount,
      increment,
    };
  },
};
</script>

<style scoped>
h1 {
  color: green;
}
button {
  margin: 10px 0;
}
</style>